<template>
  <div class="semi-circle">
    <div class="item" v-for="(v, i) in list" :key="i">
      <div class="circle" v-if="false">
        <div class="content"></div>
      </div>
      <div class="bg" :class="v.bg"></div>
      <div class="pointer-box" 
        :style="{
          'transform': 'rotate('+rotate[i]*180+'deg)'}">
        <div class="pointer" :class="[v.pointer]"></div>
      </div>
      <div class="name">{{v.name}}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'vueName',
  props: {
    list: {
      type: Array,
      default() {
        return [
          {id: 0, name: 'xxx', percen: 0.8, bg: 'onlyColor', pointer: 'bigPointer'},
          {id: 1, name: 'ccc', percen: 0.8, bg: 'onlyColor', pointer: 'bigPointer'},
          {id: 2, name: 'ddd', percen: 0.8, bg: 'colorText', pointer: 'smallPointer'},
        ]
      }
    }
  },
  data () {
    return {
      msg:''
    }
  },
  computed: {
    rotate() {
      return this.list.map((item) => {
        let percen = item.percen === 0.5 ? 0 : item.percen - 0.5
        return Number(percen.toFixed(2))
      })
    }
  },
}
</script>
 
<style scoped lang="scss">
.semi-circle{
  width: 288px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  .item {
    position: relative;
    width: 72px;
    height: 36px;
    .circle {
      position: relative;
      transform: rotate(-90deg);
      width: 72px;
      height: 72px;
      box-sizing: border-box;
      padding: 5px;
      border-radius: 50%;
      background-image: -webkit-linear-gradient(to top, #D33E13 0%, #FFD568  40%, #FFD568  60%, #79C461 100%);
      background-image: -moz-linear-gradient(to top, #D33E13  0%, #FFD568  40%, #FFD568  60%, #79C461 100%);
      background-image: linear-gradient(to top, #D33E13  0%, #FFD568  40%, #FFD568  60%, #79C461 100%);
      .content{
        width:100%;
        height:100%;
        border-radius:50%;
        background:#fff;
      }
    }
    .bg{
      position: absolute;
      top: -36px;
      left: -100%;
      width: 216px;
      height: 114px;
      background: #79C461;
      transform: scale(0.33);
    }
    .onlyColor{
      background: url('./img/onlyColor.png') no-repeat;
    }
    .colorText{
      background: url('./img/colorText.png') no-repeat;
    }
    .bigPointer{
      background: url('./img/long-d.png') no-repeat;
    }
    .smallPointer{
      background: url('./img/short-d.png') no-repeat;
    }
    .pointer-box{
      position: absolute;
      z-index: 5;
      top: 0px;
      left: 0px;
      width: 72px;
      height: 72px;
      display: flex;
      justify-content: center;
      align-items: center;
      // background: rgba($color: #000000, $alpha: .1);
      .pointer{
        width: 3px;
        height: 55px;
      }
    }
    .name{
      position: absolute;
      z-index: 10;
      top: 40px;
      width: 72px;
      height: 36px;
      line-height: 30px;
      text-align: center;
    }
  }
}
</style>
